<template>
	<view class="scroll_viewInfo">
		<view class="images_content">
			<!-- :data-descr="item.title" -->
			<view class="images_content_itemContainer" v-for="(item, index) in imageLists" :key="index"
				:class="(index + 1) % 2 === 0? 'leftImageMargin' : 'rightImageMargin'" :style="{'height': imageHeight}"
				@click="go_detailedWallpaper(item)">
				<image class="imageItem" :src="item.img" mode="aspectFill" />
			</view>
			<u-loadmore :status="isLoadmore.status" nomoreText="实在没有了,我也是有底线的" />
		</view>
		<!-- Toast提示 -->
		<u-toast ref="uToast" />
	</view>
	</view>
</template>

<script>
	import props from './props.js'
	// 
	import {
		mapState
	} from 'vuex'
	// 
	import {
		randomWallpaper
	} from '@/api';
	export default {
		name: "scrollView",
		data() {
			return {
				// 加载更多配置
				pageInfoConfig: {
					// 当前页
					pageNum: 1,
					// 每页数据量
					pageSize: 6,
				},
				// 刷新频率
				activeNum: 0,
				// 总数量，这里写死了
				total: 100,
				// 总页数，这里写死了
				zongpageNum: 15,
				// 数据列表
				initImageList: [],
				// 是否发送请求
				loadRequest: false,
				// Toast提示信息配置
				isToastInfo: {
					message: '动作太快了，慢一点',
					icon: '',
					type: 'default',
					duration: 2500,
				}
			};
		},
		props: props,
		onReachBottom() {
			this.$emit('onReachBottom');
		},
		methods: {
			getBottomFn() {
				//页面抵达底部后，如果此时的status状态是加载更多，那就调用loadmore方法
				if (this.$store.state.isLoadmore.status === 'loadmore') {
					// 触底触发当前页加1，如果大于3显示Toast组件弹窗提示，并回调继续刷新数据，小于3正常防抖调用
					this.activeNum += 1;
					this.activeNum > 3 ? this.toastFn(this.isToastInfo) : uni.$u.debounce(this.loadmore, 1000)
				}
			},
			async getImageList() {
				if (this.loadRequest) return;
				this.loadRequest = true;
				// isStatus为u-loadmore状态，isShow为是否现在组件
				this.$store.commit('activeStatus', {
					isStatus: 'loading',
					isShow: true
				});
				const getSelectWallpaper = await randomWallpaper({
					params: {
						limit: this.pageInfoConfig.pageSize,
						first: 0, // 起始数目
						skip: 180, // 略过数量
						adult: false,
						order: 'hot'
					}
				});
				this.initImageList = [...getSelectWallpaper.vertical];
				this.$store.commit('typeWallpaper_list', this.initImageList);
				this.loadRequest = false;
				this.ismore();
			},
			ismore() {
				// 判断当数据总数等于数据列表的长度时，此时已经获取到全部数据，没有更多了，将加载状态改为nomore
				if (this.pageInfoConfig.pageSize >= this.total || this.pageInfoConfig.pageNum >= this.zongpageNum) {
					this.$store.commit('activeStatus', {
						isStatus: 'nomore',
						isShow: false
					});
					// 否则，将状态改为loadmore，仍然还有数据
				} else {
					this.$store.commit('activeStatus', {
						isStatus: 'loadmore',
						isShow: true
					});
				}
			},
			loadmore() {
				// 每次刷新数据都讲当前页清0
				this.activeNum = 0;
				this.pageInfoConfig.pageNum += 1;
				this.pageInfoConfig.pageSize += 6;
				// 获取下一页的数据
				this.getImageList();
			},
			toastFn(params) {
				let that = this;
				this.$refs.uToast.show({
					...params,
					complete() {
						that.loadmore()
					}
				})
			},
			go_detailedWallpaper(e) {
				uni.$u.route('/page_currentWallpaper/wallpaperItem/wallpaperItem');
				this.$store.commit('activeWallpaperType', true);
				this.$store.commit('currentWallpaperObj', e);
				this.$store.commit('currentWallpaperObjInfo', e);
			},
		},
		computed: {
			...mapState(['isLoadmore']),
			imagesList() {
				return this.$store.state.isTypeWallpaperList;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.scroll_viewInfo {
		.images_content {
			height: 100%;
			width: 100%;
			padding-bottom: 50rpx;

			&_itemContainer {
				width: 49%;
				display: inline-block;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				overflow: hidden;
				position: relative;

				// &::after {
				// 	content: attr(data-descr);
				// 	position: absolute;
				// 	left: 0;
				// 	right: 0;
				// 	bottom: 0;
				// 	height: 100rpx;
				// 	background-color: rgba(0, 0, 0, 0.3);
				// 	backdrop-filter: blur(10px);
				// 	color: #eee;
				// 	font-size: 28rpx;
				// 	text-align: center;
				// 	border-bottom-left-radius: 20rpx;
				// 	border-bottom-right-radius: 20rpx;
				// 	// line-height: 100rpx;
				// }

				.imageItem {
					width: 100%;
					height: 100%;
				}
			}

			.leftImageMargin {
				margin-left: 1%;
			}

			.rightImageMargin {
				margin-right: 1%;
			}
		}
	}
</style>
